<template>
  <div>
    <div class="model-title-css">
      <div class="title">项目信息</div>
    </div>

    <div class="background_wrap">
      <div class="operate_wrap flexDiv">
        <div class="flex-left">
          <el-button type="primary" size="small" class="add buildButtonStyle" v-permission="permission.add" round @click="showDialog('build', '项目信息新增')">
            <i class="iconfont icon-icon_add"></i>&nbsp;新增项目
          </el-button>
        </div>

        <div class="flex-right">
          <el-select class="select" size="small" v-model="search.constructionUnitId" placeholder="建设单位" clearable @change="onSearch">
            <el-option v-for="item in constructionUnitOptions" :key="item.id" :label="item.fullname" :value="item.id">
            </el-option>
          </el-select>
          <el-select class="select" size="small" v-model="search.projectType" placeholder="项目类型" clearable @change="onSearch">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-select class="select" size="small" v-model="search.phaseId" placeholder="所属阶段" clearable @change="onSearch">
            <el-option v-for="item in phaseOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-input class="input" size="small" v-model="search.proName" placeholder="请输入项目名称" clearable @change="onSearch"></el-input>

          <el-date-picker class="mr15" clearable v-model="searchDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="选择开始日期" end-placeholder="选择结束日期" @change="onChangeTime">
          </el-date-picker>

          <el-button class="search" size="small" @click="onSearch">
            <i class="iconfont icon-sousuo"></i> 搜索
          </el-button>
        </div>
      </div>

      <div class="list_wrap WholeScroll">
        <el-table class="table-three-blue" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" @cell-click="cellClick" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px">
          <el-table-column width="60" label="序号" type="index" align="center">
            <template slot-scope="scope">
              {{ scope.$index + search.pageNo * search.pageSize + 1 }}
            </template>
          </el-table-column>
          <el-table-column width="150" prop="shortName" label="项目简称">
            <template slot-scope="scope">
              <div style="text-align: left">{{ scope.row.shortName }}</div>
            </template>
          </el-table-column>
          <el-table-column width="400" show-overflow-tooltip prop="proName" label="项目名称">
            <template slot-scope="scope">
              <div style="text-align: left">{{ scope.row.proName }}</div>
            </template>
          </el-table-column>
          <el-table-column width="300" show-overflow-tooltip prop="constructionUnit" label="建设单位"></el-table-column>
          <el-table-column width="100" show-overflow-tooltip prop="projectTypeName" label="项目类型"></el-table-column>
          <el-table-column width="100" show-overflow-tooltip prop="phaseName" label="所属阶段"></el-table-column>
          <el-table-column width="120" prop="startTime" label="开工日期"></el-table-column>
          <el-table-column width="120" prop="endTime" label="竣工日期"></el-table-column>
          <el-table-column width="170" prop="createTime" label="创建时间"></el-table-column>
          <el-table-column width="160" show-overflow-tooltip prop="amount" label="总投资（万元）">
            <template slot-scope="scope">
              <div style="text-align: right;">
                <!-- {{ scope.row.amount |moneyFilter }} -->
                {{scope.row.amount}}
              </div>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip label="操作" min-width="440" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="showDialog('check','项目信息查看',scope.row.id)">&nbsp;查看</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="showDialog('edit','项目信息编辑',scope.row.id)">&nbsp;修改</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="showDialog('delete','删除',scope.row.id)">&nbsp;删除</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-gengduo action_color1" v-permission="permission.section" @click="showDialog('section','标段',scope.row.id)">&nbsp;标段</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-tongxunlu action_color1" @click="showDialog('addressBook','项目通讯录',scope.row)">&nbsp;项目通讯录</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination style="float: right; margin-top: 30px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.total" :current-page="search.pageNo + 1" :prev-text="tablePaginationPrev" :next-text="tablePaginationNext" @current-change="paginationChange">
        </el-pagination>
      </div>
    </div>

    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
    <book-detail :postDetail="postAddressDetailData" @reloadList="getList(true)"></book-detail>
  </div>
</template>
z
<script>
import { tableRowStyleGol, tableCellStyleGol, tableHeaderCellStyleGol, } from '@/utils/publicFun'

import crudProject from '@/api/buss/project'
import msgUtil from '@/utils/msgUtil'
import crudDict from '@/api/system/dict'
import publicSearchData from '@/mixins/publicSearchData'
// import projectSectionInfo from '@/api/buss/common'
export default {
  mixins: [publicSearchData],
  name: 'info',
  components: {
    Detail: require('./info-detail/info-detail').default,
    BookDetail: require('./address-book-detail').default
  },
  data() {
    return {
      permission: {
        add: ['100', 'project:add'],
        show: ['100', 'project:show'],
        edit: ['100', 'project:edit'],
        del: ['100', 'project:del'],
        section: ['100', 'project:section'],
      },
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      tablePaginationPrev: '上一页',
      tablePaginationNext: '下一页',
      addCan: true, //是否有新增权限
      contractsAmount: 0,
      searchDate: [],//搜索日期
      search: {
        pageNo: 0,
        //pageIndex: 0,
        pageSize: 10,
        //pageSum: 0,
        total: 0,
        status: 'S',
        projectType: '', // 项目类型
        region: '', // 所属区域
        proName: '', //项目名称
        sortField: 'createTime',
        regionName: '', // 所属区域
        phaseId: '', //所属阶段
        constructionUnit: '', //建设单位
        beginTime: '',
        endTime: '',
      }, // 搜索参数
      typeOptions: [{ label: '项目类型', value: '' }],
      regionOptions: [],
      phaseOptions: [],
      constructionUnitOptions: [
        //建设单位
      ],
      list: [],
      postDetailData: {
        show: false,
        type: 'build',
      },
      postAddressDetailData: {
        show: false,
        type: 'build',
      },
      navigationIndex: 0,
      contractDetail_postDetailData: {
        show: false,
        type: 'check',
      },
    }
  },
  filters: {
    moneyFilter(value) {
      try {
        let before = value.toFixed(2)
        let numFlag = true
        //判断是否正数，是负数就先删掉 - 然后最后加回去
        if (before >= 0) {
          numFlag = true
        } else {
          numFlag = false
        }
        before = before.toString()
        let num = before.split('.')[0]
        if (numFlag !== true) {
          num = num.substr(1, num.length)
        }
        let numSmall = before.split('.')[1]
        let result = [], counter = 0;
        num = (num || 0).toString().split('');
        for (let i = num.length - 1; i >= 0; i--) {
          counter++;
          result.unshift(num[i]);
          if (!(counter % 3) && i != 0) {
            result.unshift(',');
          }
        }
        let after = numSmall === undefined ? result.join('') : result.join('') + '.' + numSmall
        if (numFlag !== true) {
          after = '-' + after
        }
        return after
      } catch (e) {
        return ""
      }
    },
  },
  created() {
    this.initData()
    this.getList();
  },
  methods: {
    onSearch() {
      this.search.pageNo = 0
      this.search.total = 0
      this.getList()
    },
    initData() {
      this.typeOptions = []
      this.phaseOptions = []
      this.regionOptions = []
      this.constructionUnitOptions = []
      crudDict.getByCode('project_type').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.typeOptions.push({ 'value': data[i].id, 'label': data[i].name });
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取项目类型失败")
      })

      crudDict.getByCode('phase_type').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.phaseOptions.push({ 'value': data[i].id, 'label': data[i].name });
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取阶段类型失败")
      })

      crudDict.getByCode('companyRegion').then(res => {
        if (res.code === 200) {
          var data = res.data;
          for (var i in data) {
            this.regionOptions.push({ 'value': data[i].id, 'label': data[i].name });
          }
        } else {
          msgUtil.error2(res.data.message)
        }
      }).catch(() => {
        msgUtil.error2("获取行政等级失败")
      })

      crudProject.getCompanytList().then(res => {
        if (res.status == 1) {
          this.constructionUnitOptions = res.data
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },
    onChangeTime() {
      if (this.searchDate) {
        this.search.beginTime = this.searchDate[0]
        this.search.endTime = this.searchDate[1]
      } else {
        this.search.beginTime = ''
        this.search.endTime = ''
      }
      this.onSearch()
    },
    //切换分页器
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.getList()
    },
    // 获取列表 api
    getList() {
      this.list = []
      //this.list.splice(0, this.list.length)
      let queryData = { ...this.search }
      if (this.search.beginTime) {
        queryData.beginTime = queryData.beginTime + ' 00:00:00'
      }
      if (this.search.endTime) {
        queryData.endTime = queryData.endTime + ' 59:59:59'
      }

      crudProject.getTablePage(queryData).then(res => {
        if (res.status == 1) {
          if (res.list.length > 0) {
            this.list = res.list
            this.list.forEach((item, index) => {
              if (item.startTime) {
                item.startTime = item.startTime.substring(0, 10)
              }
              if (item.endTime) {
                item.endTime = item.endTime.substring(0, 10)
              }
            })
            //this.$set(this.list, this.list.length, res.list)
          }
          this.search.total = res.total
        } else {
          msgUtil.error2(res.data.message)
        }
      })
    },
    /*  操作 */
    showDialog(type, typeName, detailId) {
      switch (type) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: '',
          }
          break
        case 'edit':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'check':
          this.postDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId,
          }
          break
        case 'addressBook':
          this.postAddressDetailData = {
            show: true,
            type: type,
            typeName: typeName,
            detailId: detailId.id,//
            companyId: detailId.constructionUnitId,
          }
          break
        case 'delete':
          if (detailId === '') {
            msgUtil.error2('请先选择要删除的记录！')
            return
          }
          msgUtil.confirm('确认删除该条数据以及关联的标段、合同?').then(res => {
            let idlist = []
            idlist.push(detailId)
            let param = {
              ids: idlist
            }
            crudProject.del(param).then(res => {
              if (res.status === 1) {
                msgUtil.success2('删除成功!')
                this.getList()
              } else {
                msgUtil.error2(res.data.message)
              }
            })
          })
          break
        case 'section':
          this.$router.push({ path: '/projectManagement/sectionManage', query: { id: detailId } })
          break
      }
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      // console.log(row, column, cell, event)
      console.log(column)
      //如果点击的是“来源” --跳出合同的弹窗
      // if (column.property === 'source') {
      //   this.handleClickDeal({
      //     type: 'contract_show',
      //     detailId: row.id,
      //     actions: row.actions,
      //   })
      // }
      if (column.property === 'proName') {
        this.showDialog('check', '项目信息查看', row.id)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  .title {
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    font-weight: 600;
  }
}
.operate_wrap {
  width: 100%;
  .select {
    width: 150px;
    margin-right: 15px;
  }
  .input {
    width: 150px;
    margin-right: 15px;
  }
  .mr15 {
    margin-right: 15px;
  }
  .search {
    width: 88px;
    color: #fff;
    margin-left: 0 !important;
  }
}
.list_wrap {
  margin-top: 20px;
}
.navigation {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #313e50;
  margin-top: 5px;
  .el-button {
    height: 40px;
    background: #374256;
    border: 1px solid #374256;
    font-family: PingFangSC-Regular;
    border-radius: 5px 5px 0 0;
    min-width: 95px;
    font-size: 14px;
    color: #8190a7;
    &:hover {
      background-color: #f2f2f2;
    }
    &[selected] {
    }
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
